
<template>
    <el-container>
        <el-aside width="400px" style="padding-top: 20px;">

            <el-card :body-style="{ padding: '0px' }">
                <img :src="Merchat.merImg" class="image">
                <div>
                    <el-button type="text" @click="dialogTableVisible = true" class="bottom-clearfix"> 修改信息</el-button>
                    <el-dialog title="修改商家信息" :visible.sync="dialogTableVisible">
                        <el-form :visible.sync="dialogTableVisible" :model="Merchat"  label-width="100px" ref="ruleForm"
                            class="demo-ruleForm">
                            <el-form-item label="商家名字" >
                                <el-input type="text" v-model="Merchat.merName"></el-input>
                            </el-form-item>
                            <el-form-item label="区" >
                                <el-input type="text"  v-model="Merchat.region"></el-input>
                            </el-form-item>
                            <el-form-item label="街道"  >
                                <el-input v-model="Merchat.street"></el-input>
                            </el-form-item>
                            <el-form-item label="详细地址" >
                                <el-input type="text"  v-model="Merchat.detailAddress"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="save()">提交</el-button>
                                <el-button @click="fetchData()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </el-card>
        </el-aside>
        <el-container>
            <el-main>

                <el-card class="box-card">
                    <div>
                        <el-divider content-position="left">商家名字</el-divider>
                        {{ Merchat.merName }}
                    </div>
                    <div>
                        <el-divider content-position="left">区</el-divider>
                        {{ Merchat.region }}
                    </div>
                    <div>
                        <el-divider content-position="left">街道</el-divider>
                        {{ Merchat.street }}
                    </div>
                    <div>
                        <el-divider content-position="left">详细地址</el-divider>
                        {{ Merchat.detailAddress }}
                    </div>
                </el-card>


            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import axios from "axios";
export default {

    data() {
        return {
            merId: 1,
            Merchat: {},
            dialogTableVisible: false,
            reMerchat:{},
        }
    },
    created() {
        this.merId=this.$route.params.merId
        console.log(this.$route.params.merId)
        console.log(this.merId)
        //在创建vue实例后触发初始化钩子函数
        this.fetchData();
        
    },
    mounted(){
        
    },
    methods: {
        fetchData() {
            //查询所有Order信息
            axios({
                url: 'http://localhost:8080/MerchatInfo/select',
                params: {
                    merId: this.merId,
                },
                method: 'Post',
            }).then(response => {
                this.Merchat = response.data[0]
                // console.log(response.data[0])
            })
           
        },
        save() {
            axios({
                url: 'http://localhost:8080/MerchatInfo/update',
                data: this.Merchat,
                method: 'Post',
            }).then(res => {
                console.log(res),
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })

                this.fetchData()
                //关闭弹窗
                this.dialogFormVisible = false
            })
        },
        resetForm() {
        this.Merchat=this.reMerchat;
      }
    },
}
</script>
<style>
.image {
    width: 100%;
    display: block;
}

.box-card {
    font-size: 25px;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}


.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: left;
    line-height: 50px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.bottom-clearfix {
    width: 398px;
}
</style>